/* 清除浏览器默认内外边距、列表样式等 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;   /* 去除列表默认圆点 */
    text-decoration: none; /* 去除链接下划线 */
}

/* 一级菜单整体布局：居中显示 */
.menu {
    text-align: center;
    margin-top: 50px;
}

/* 一级菜单项：横向排列 */
.menu li {
    display: inline-block;
    margin: 0 20px;
    position: relative; /* 为二级菜单的绝对定位做父级参考 */
}

/* 一级菜单文字样式 */
.menu li a {
    color: #333;
    font-size: 18px;
}

/* 二级菜单默认隐藏 + 定位样式 */
.submenu {
    display: none; /* 初始隐藏 */
    position: absolute;
    top: 100%; /* 二级菜单位于一级菜单正下方 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px 0;
    white-space: nowrap; /* 防止二级菜单文字换行 */
}

/* 二级菜单项：纵向排列 +  hover 样式 */
.submenu li {
    display: block; /* 纵向排列 */
    margin: 0;
    padding: 5px 20px;
}
.submenu li a:hover {
    color: #666; /*  hover 时文字加深 */
}

/* 鼠标 hover “咖啡”项时，显示二级菜单 */
.has-submenu:hover .submenu {
    display: block;
}